<template>
  <el-container class="setting-center_mall-shop-setting_shop-initialize">
    <el-main>
      <el-card shadow="never" class="commercia-tenant-list-title tableCard">
        <vxe-toolbar :custom="{icon: 'el-icon-s-operation'}" :refresh="{query: getListData}" print>
          <template v-slot:buttons>
            <el-button class="mb10" size="small" type="primary" icon="el-icon-plus" @click="goCreatePage">添加</el-button>
          </template>
        </vxe-toolbar>
        <vxe-table
          border
          stripe
          resizable
          highlight-hover-row
          :auto-resize="true"
          :data="list"
          height="500"
          :print-config="{}">
          <vxe-table-column type="seq" title=" " width="50" />
          <vxe-table-column field="title" title="标题" min-width="100">
            <template slot-scope="scope" class="linkList">
              <div>
                {{ scope.row.title }}
                <el-tag v-if="scope.row.isHome" effect="dark" size="mini" style="margin-left: 10px;">店铺主页</el-tag>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="typeName" title="页面分类" width="180" />
          <vxe-table-column field="createTime" title="创建时间" width="180" />
          <vxe-table-column title="状态" width="80" align="center" slots="default">
            <template slot-scope="scope" class="linkList">
              <el-switch
                v-model="scope.row.publishStatus"
                :active-value="1"
                :inactive-value="0"
                active-text
                inactive-text
                @change="continuityUpdate(scope.row.id,scope.row.publishStatus)"
              />
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" fixed="right" width="150" align="center" slots="default">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handlePreview(scope)">预览</el-button>
              <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="handleEdit(scope)">编辑</el-button>
              <el-button v-if="scope.row.publishStatus != 1" type="text" size="mini" @click="handleDelete(scope)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager
          :current-page.sync="getDataParams.pageNum"
          :page-size.sync="getDataParams.pageSize"
          :total="Total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          @page-change="getList(getDataParams.pageNum)"
        />
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import { getmicroPageList, updateStates, deleteMicroPage } from '@/api/shoppingMall/feature'

export default {
  name: 'FeatureList',
  components: {},
  data() {
    return {
      getDataParams: {
        pageNum: 1,
        pageSize: 10
      },
      Total: 0,
      list: []
    }
  },
  computed: {},
  mounted() {
    this.getListData()
  },
  methods: {
    // 页面状态改变
    continuityUpdate(id, state) {
      updateStates({
        id: id,
        status: state
      }).then(res => {
        console.log('update_res', res)
        this.$message.success(state === 0 ? '禁用成功' : '发布成功')
      })
    },
    getList(pagesNum) {
      this.getDataParams.pageNum = pagesNum
      this.getListData()
    },
    getListData() {
      getmicroPageList(this.getDataParams).then(res => {
        this.list = res.records
        this.Total = res.total
      })
    },
    /** 跳转编辑页面*/
    goCreatePage() {
      this.$router.push({
        name: 'activityPage',
        query: {
          category: 0
        }
      })
    },
    /** 点击编辑*/
    handleEdit(item) {
      this.$router.push({
        name: 'activityPage',
        query: {
          category: 0,
          id: item.row.id,
          type: 'edit'
        }
      })
    },
    /** 点击预览*/
    handlePreview(item) {
      alert('to be build')
    },
    /** 点击删除*/
    handleDelete(item) {
      console.log(item)
      const row = item.row
      if (row.isHome) {
        this.$message.error('不能删除主页')
        return
      }
      if(!row.id){
        this.$message.error('获取页面id出错!')
        return
      }
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
          deleteMicroPage({ id: row.id}).then(res => {
            console.log('del_res', res)
            this.$message.success('删除成功!')
            this.getListData()
          })
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="scss">
.feature-list-container {
  .content-box {
    margin-top: 15px;
  }
}
</style>
